<template>
	
	<div class="home bg-l-r" v-if="type === 'text'">
		<div class="swiper">
			<div class="swiper-pic bg"></div>
			<div class="swiper-tit bg"></div>
			<div class="swiper-des bg"></div>
		</div>
		<div class="list">
			<div v-for="n of 3" class="list-detail">
				<div class="detail-pic bg"></div>
				<div class="detail-des">
					<div class="des-tit bg"></div>
					<div class="des-time bg"></div>
				</div>
			</div>
		</div>
	</div>
	
	 
	<div class="video" v-else-if="type === 'video'">
		<div class="video-list" v-for="n of 2">
			<div class="video-pic bg"></div>
			<div class="video-tit bg"></div>
			<div class="video-des bg"></div>
		</div>
	</div>
	
	<div class="que" v-else-if="type === 'que'">
		<div class="que-list bg" v-for="n in 4"></div>
	</div>
	
	<div class="detail1" v-else-if="type === 'detail'">
		<div class="detail1-box">
			<div class="detail1-tit bg"></div>
			<div class="detail1-p bg"></div>
			<div class="detail1-p bg"></div>
		</div>
		<div class="detail-pic1 bg"></div>
		<div  class="detail1-box">
			<div class="detail1-pp bg"></div>
			<div class="detail1-pp bg"></div>
			<div class="detail1-pp bg"></div>
			<div class="detail1-pp bg"></div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Skeleton-screen',
		props:{
			type:{
				type:String,
				default:'text',
				required:true
			}
		},
		components:{},
		mounted(){},
		updated(){},
		methods:{},
	}
</script>

<style scoped>
	.home{overflow: hidden;}
	.swiper{padding:0.2rem 0;margin-top: 0.88rem;}
	.bg{background-color: #eee;border-radius: 0.04rem;}
	.swiper-pic{width: 100%; height: 1.94rem;}
	.swiper-tit{width: 100%;height: 0.45rem;margin: 0.16rem 0 0.1rem;}
	.swiper-des{height: 0.16rem; width: 1.5rem;}
	.list{border-top: 0.01rem solid #ececec;}
	.list-detail{display: flex;justify-content: space-between;padding: 0.2rem 0;}
	.detail-pic{width: 1.08rem;height: 0.6rem;}
	.des-tit{width: 2.24rem;height: 0.4rem;}
	.des-time{width: 1.59rem;height: 0.14rem;margin-top: 0.05rem;}
	
	.video{margin-top: 0.88rem;}
	.video-list{padding:0.1rem 0.1rem 0.15rem;}
	.video-pic{width: 100%;height: 2.4rem;}
	.video-tit{margin-top: 0.08rem;height: 0.48rem;}
	.video-des{margin: 0.15rem 0 0.05rem;height: 0.16rem;}
	
	.que{padding: 0 0.1rem;margin-top: 0.56rem;}
	.que-list{width: 100%;height: 1.3rem;margin-top: 0.15rem;}
	
	.detail1{margin-top: 0.4rem;}
	.detail1-box{padding: 0.1rem 0.25rem 0;}
	.detail1-tit{height: 1.2rem;margin-bottom: 0.2rem;}
	.detail1-p{height: 0.16rem;margin-bottom: 0.03rem;}
	.detail-pic1{margin-top: 0.4rem;width: 100%;height: 2.4rem;margin-bottom: 0.3rem;}
	.detail1-pp{width: 100%;height: 0.22rem;margin-bottom: 0.05rem;}
</style>
